<template>
  <div v-loading="loading" class="comment_detail">
    <div class="comment_detail_list">
      <!-- 点评内容 -->
      <CommentItem :item="commentInfo.bizAppraiseComment" class="mb8">
        <template #content>
          <div class="tab mt10">
            <div v-for="i in 5" :key="i" class="tab_tr">
              <template v-if="commentInfo.appraiseConfig['scoreTitle' + i]">
                <span class="small tab_td">{{ commentInfo.appraiseConfig["scoreTitle" + i] }}：</span>
                <span class="tab_td"><Rate
                  v-model="
                    commentInfo.bizAppraiseComment['score' + i + 'Value']
                  "
                  allow-half
                  color="#ffd21e"
                  readonly
                  size="12px"
                  void-color="#dedede"
                  void-icon="star"
                /></span>
              </template>
            </div>
          </div>
        </template>
      </CommentItem>
      <!-- 回复  内容区域 -->
      <Sticky>
        <div class="flex_span">
          <span class="">评论 </span><span class="fw500 pl10">{{ total }}</span>
          <span v-if="commentInfo.appraise.likeSwitch === 'Y'" class="ml20">赞
            <span class="fw500 pl10">{{
                commentInfo.likeTotal || 0
              }}</span></span>
        </div>
      </Sticky>
      <div class="comment_reply">
        <List
          v-model:loading="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <ReplyList
            :commentDetail="commentInfo.bizAppraiseComment"
            :likesIds="likesIds"
            :replyList="replyList"
            :userInfo="userInfo"
            @handleReply="handleReply"
            @jumpReplyDetail="jumpReplyDetail"
          />
        </List>
      </div>
    </div>
    <!-- 回复框 -->
    <ReplyBox
      v-if="commentInfo.appraise.subCommentSwitch === 'Y'"
      :commentInfo="commentInfo.bizAppraiseComment"
      :replyTo="replyTo"
      :userInfo="userInfo"
      @callback="callback"
      @clearReply="clearReply"
    />
  </div>
</template>

<script setup>
import {
  childComment,
  getCommentInfo,
  getCommentLikeByUser
} from "@/server/business/comment.js";
import { apiCheckToken } from "@/server/business/survey.js";
import { setWeappToken } from "@/utils/auth.js";
import { List, Rate, Sticky } from "vant";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CommentItem from "./component/commentItem.vue";
import ReplyList from "./component/replyList.vue";
import ReplyBox from "./component/replyBox.vue";

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const commentInfo = ref({
  appraise: {},
  appraiseConfig: {},
  bizAppraiseComment: {}
});
const replyList = ref([]);
const replyTo = ref();
const total = ref(0);
const likesIds = ref([]);
let userInfo = ref({});
const params = {
  commentId: commentInfo.value.bizAppraiseComment?.commentId,
  pageNum: 1,
  pageSize: 10
};
// 回复F
const handleReply = (event) => {
  replyTo.value = event;
};
// 跳转回复详情
const jumpReplyDetail = () => {
  router.push({ name: "H5CommentReplyDetail" });
};
// 获取列表
const onLoad = () => {
  childComment(params).then((res) => {
    total.value = res.total;
    replyList.value.push(...res.rows);
    loading.value = false; // 加载状态结束
    finished.value = replyList.value.length >= res.total; // true 数据全部加载完成
    params.pageNum++;
  });
};
// 回复成功后
const callback = () => {
  clearReply();
  loading.value = true;
  params.pageNum = 1;
  replyList.value = [];
  onLoad();
};
// 清空回复对象 变成回复点评
const clearReply = () => {
  replyTo.value = null;
};
// 获取登录用户对当前点评的点赞数据
const getLikes = () => {
  if (!route.query.id) return;
  getCommentLikeByUser({
    appraiseId: route.query.id,
    likeby: userInfo.value.pkMember
  }).then((res) => {
    likesIds.value = res.data || [];
  });
};
// 根据token获取用户信息
const getUserInfo = async () => {
  if (route.query.token) {
    setWeappToken(route.query.token); // 存储用户token 用于加入接口的header
    let res = await apiCheckToken({ memberUserToken: route.query.token });
    userInfo.value = res.data;
  }
};
// 获取回复信息
const getCommentAllInfo = async () => {
  getCommentInfo(route.query.commentId).then(async (res) => {
    commentInfo.value = res.data;
    params.commentId = commentInfo.value.bizAppraiseComment?.commentId;
    if (
      res.data.appraise?.likeSwitch === "Y" ||
      res.data.appraise?.subCommentSwitch === "Y"
    ) {
     if(!route.query.staffUserId) await getUserInfo();
    }
    if (res.data.appraise?.likeSwitch === "Y"&&!route.query.staffUserId) getLikes();
    onLoad();
  });
};

// 初始化
const init = () => {
  getCommentAllInfo();
};
init();
</script>

<style scoped>
.comment_detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--van-gray-1);
}

.comment_detail_list {
  flex: 1;
  overflow-y: auto;
}

.small {
  font-size: 1.2rem;
  color: #999999;
}

.flex_span {
  display: flex;
  align-items: center;
  color: #333333;
  line-height: 2rem;
  padding: 1.4rem 1.5rem;
  background: var(--van-white);
  border-bottom: 1px solid var(--van-gray-4);
}

.comment_reply {
  background: var(--van-white);
  padding: 0 0.7rem;
}

.tab {
  display: table;
}

.tab .tab_tr {
  display: table-row;
  line-height: 2.2rem;
}

.tab .tab_td {
  display: table-cell;
}
</style>
